<template>
    <page-frame>
        <div class="healthMonitor">
          <div class="toptitle">
            <div class="left" style="padding-bottom:1px;">健康监测</div>
            <div class="right">
              <div class="btns">

              </div>
            </div>
          </div>
          <div class="borderT"></div>
          <!--<div class="tabChange">-->
            <!--<label style="margin-right:10px;">监测设备</label>-->
            <!--<el-button @click="deviceToggle(index,tab.id)" v-for="(tab,index) in deviceTabs" :class="{lightGreenBtn:deviceActive===index}">{{tab.name}}</el-button>-->
          <!--</div>-->
          <!--<div class="tabChange">-->
            <!--<label style="margin-right:10px;">监测项目</label>-->
            <!--<el-button @click="itemToggle(index,tab.id)" v-for="(tab,index) in itemTabs" :class="{lightGreenBtn:itemActive===index}">{{tab.name}}</el-button>-->
          <!--</div>-->

          <div class="file-main">
            <div class="input">
              <el-row class="query">
                <el-col style="width: 130px;">
                  <div class="input-item">
                    <el-select style="width:90%!important;" v-model="fileId" @change="selectItem" @clear = "clearItem" clearable placeholder="请选择项目">
                      <el-option
                        v-for="item in fileList"
                        :label="item.fileName"
                        :value="item.fileId">
                      </el-option>
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="input-item" v-show="fileId==1">
                    <el-input v-model="queryData.memberName" @keyup.enter.native="search" placeholder="请填写会员姓名">
                    </el-input>
                  </div>
                  <div class="input-item" v-show="fileId==2">
                    <el-select v-model="queryData.lidList" @change="search" multiple placeholder="请选择护理等级">
                      <el-option
                        v-for="item in nursingGradeOptions"
                        :label="item.lname"
                        :value="item.lid">
                      </el-option>
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="6">
                  <el-button class="query lightGreenBtn" @click="search">搜索</el-button>
                </el-col>
              </el-row>
            </div>
            <div class="tabs">
              <el-table
                :data="tableData"
                border
                highlight-current-row
                style="width: 100%">
                <el-table-column
                  prop="memberNameAge"
                  label="会员姓名"
                >
                </el-table-column>
                <el-table-column
                  prop="bedNo"
                  label="床位"
                >
                </el-table-column>
                <el-table-column
                  prop="lid"
                  label="照护等级"
                >
                </el-table-column>
                <el-table-column
                  prop="comboNames"
                  label="绑定设备"
                >
                </el-table-column>
                <el-table-column
                  prop="cycle"
                  label="最近测量时间"
                  width="220"
                >
                </el-table-column>
                <el-table-column
                  prop="operating"
                  label="操作"
                  width="100"
                >
                  <template scope="scope">
                    <el-button type="text" size="small" @click.stop="trendMap(scope.row)">健康数据</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pagination">
                <div class="block">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChangePage"
                    :current-page="currentPage"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    :total="total">
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
    </page-frame>
</template>

<script >
    import {CONSTANT_MONITOR_DEVICE_OPTION} from '../../config/constant';
    import {CONSTANT_MONITOR_ITEM_OPTION} from '../../config/constant';
    import servicePlanApi from '../../service/serManagement/servicePlanApi';
    import healthMonitorApi from '../../service/healthManagement/healthMonitorApi';
    export default {
      data () {
        return {
          deviceActive:0,
          itemActive:0,
          deviceTabs:CONSTANT_MONITOR_DEVICE_OPTION,
          itemTabs:CONSTANT_MONITOR_ITEM_OPTION,
          queryData:{
            "lidList": [],
            "memberName": "",
          },
          nursingGradeOptions:[],
          fileId:1,
          fileList:[{
            fileId: 1,
            fileName: "会员姓名"
          },{
            fileId: 2,
            fileName: "照护等级",
          }],
          tableData:[],
          total:0,
          currentPage: 1,
        }
      },
      methods: {
        init() {
          this.getCareLevel();
          this.loadTableData(1);
        },

        //search
        search(){
          this.loadTableData(1);
        },
        loadTableData(pageNum){
          let self = this;
          healthMonitorApi.getHealthMonitorPageList(pageNum,10,self.queryData).then(
            (res)=>{
              self.tableData = res.data.data.list;
              self.total = res.data.data.total;
              for(let i=0;i<self.tableData.length;i++){
                if(self.tableData[i].gender==0){
                  self.tableData[i].genderName = '男';
                }else{
                  self.tableData[i].genderName = '女';
                }
                self.tableData[i].memberNameAge = self.tableData[i].memberName+"/"+self.tableData[i].age+"/"+self.tableData[i].genderName;
              }
            }
          );
        },
        /**
         * 获得照护等级
         */
        getCareLevel(){
          let self = this;
          servicePlanApi.getCareLevel().then(
            (response)=>{
              self.nursingGradeOptions = response.data.data;
            }
          );
        },
        //device tab switch
        deviceToggle(index,id){
          this.deviceActive = index;
        },

        //item tab switch
        itemToggle(index,id){
          this.itemActive = index;
        },

        //clear data
        selectItem(){
          //清空选项
          this.queryData.lidList=[];
          this.queryData.memberName= "";
        },

        //clear(click x)
        clearItem(){
          this.selectItem();
        },

        //operating:trend map
        trendMap(row){
          this.$router.push({name:'healthTrend',params:{memberId:row.memberId, certNo: row.cardno}});
        },

        //page
        handleSizeChange(val) {
//          console.log(`每页 ${val} 条`);
        },
        handleCurrentChangePage(val) {
          this.currentPage = val;
//          console.log(`当前页: ${val}`);
          this.loadTableData(this.currentPage);
        },
      },

      mounted: function () {
        this.init();
      },
    }
</script>
<style>

</style>
